import { Row, Col } from 'antd';

export const AxLayout = props => {
  const { north, west, center, east, south, gutter = 6 } = props;
  return (
    <>
      {north && (
        <Row gutter={gutter}>
          <Col span={north.span}>
            {north.items ? <AxLayout {...north.items} /> : north.children}
          </Col>
        </Row>
      )}
      {(west || center || east) && (
        <Row gutter={gutter}>
          {west && (
            <Col span={west.span}>{west.items ? <AxLayout {...west.items} /> : west.children}</Col>
          )}
          {center && (
            <Col span={center.span}>
              {center.items ? <AxLayout {...center.items} /> : center.children}
            </Col>
          )}
          {east && (
            <Col span={east.span}>{east.items ? <AxLayout {...east.items} /> : east.children}</Col>
          )}
        </Row>
      )}
      {south && (
        <Row gutter={gutter}>
          <Col span={south.span}>
            {south.items ? <AxLayout {...south.items} /> : south.children}
          </Col>
        </Row>
      )}
    </>
  );
};
